<template>
  <div class="status">
    <div class="left">
      <div class="left-top">
        <div class="left1">
          <div class="title">开竣工情况</div>
          <div id="main1"></div>
        </div>
        <div class="right">
          <div class="text1">
            <img src="@/assets/images/blue.png" alt="" />
            新开工
          </div>
          <div class="text2">
            <img src="@/assets/images/blue.png" alt="" />
            新竣工
          </div>
          <div id="main2"></div>
          <div id="main3"></div>
          <div class="bb">
            <p>
              <span style="width: 100px">{{ newConstruction.name }}</span>
              <span class="number">{{ newConstruction.value }}</span>
            </p>
            <p>
              <span style="width: 100px">已开工</span>
              <span class="number">{{ workHasStarted.value }}</span>
            </p>
          </div>
          <div class="bb2">
            <p>
              <span style="width: 100px">{{ newlyCompleted.name }}</span>
              <span class="number">{{ newlyCompleted.value }}</span>
            </p>
            <p>
              <span style="width: 100px">{{ completed.name }}</span>
              <span class="number">{{ completed.value }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="left-bottom" v-show="!departmentShow">
        <div class="bot_tab">
          <div
            @click="startSwitching(1)"
            :class="startShow1 == true ? 'active' : ''"
          >
            新开工排行榜
          </div>
          <div
            @click="startSwitching(2)"
            :class="startShow2 == true ? 'active' : ''"
          >
            新竣工排行榜
          </div>
        </div>
        <div id="main4"></div>
      </div>
      <div class="left-bottom" v-show="departmentShow">
        <div class="bot_tab">
          <div
            v-for="(item, index) in bot_tabTit1"
            :key="index"
            :class="bot_tabIndex1 == index ? 'active' : ''"
            @click="bot_tabTitSwitching1(item, index)"
          >
            {{ item.name }}
          </div>
        </div>
        <tab :tableData="tableData1" :showSort="true" :columns="columns"></tab>
      </div>
    </div>
    <div class="right2">
      <div class="right_top">
        <div class="title">投资入库情况</div>
        <div class="main5">
          <div id="main5"></div>
          <div class="blue"></div>
        </div>
        <div class="main6">
          <div id="main6"></div>
          <div class="yellow"></div>
        </div>
        <div class="box">
          <p v-for="item in box_data" :key="item.index">
            <span class="icon-wancheng1"></span>
            <span class="word">{{ item.name }}</span>
            <span class="number">{{ item.value }}</span>
          </p>
        </div>
      </div>
      <div class="line"></div>
      <div class="right_bottom" v-show="!departmentShow">
        <div class="bot_tab">
          <div
            @click="investmentSwitching(1)"
            :class="inShow1 == true ? 'active' : ''"
          >
            形象投资排行榜
          </div>
          <div
            @click="investmentSwitching(2)"
            :class="inShow2 == true ? 'active' : ''"
          >
            入库投资排行榜
          </div>
        </div>
        <!-- 组件切换 -->
        <div id="main7"></div>
      </div>
      <div class="right_bottom" v-show="departmentShow">
        <div class="bot_tab">
          <div
            @click="bot_tabTitSwitching(item, index)"
            :class="bot_tabIndex == item.index ? 'active' : ''"
            v-for="(item, index) in bot_tabTit"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
        <tab :tableData="tableData" :showSort="true" :columns="columns1"></tab>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  GetBuildTotal,
  GetInvestTotal,
  GetBuildData,
  GetInvestData
} from '@/api/index';
import tab from '../table/tab.vue';
import math from '@/utils/math';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { tab },
  data() {
    //这里存放数据
    return {
      tableData: [],
      tableData1: [],
      //新开工 竣工排行榜切换用
      startShow1: true,
      startShow2: false,
      //投资排行榜切换用
      inShow1: true,
      inShow2: false,
      //计划新开工
      newConstruction: 0,
      //已开工
      workHasStarted: 0,
      //计划新竣工
      newlyCompleted: 0,
      //已竣工
      completed: 0,
      //新开工排行榜数据
      kaipai: {
        name: [],
        xAxis: null,
        rate: null,
        data: null
      },
      //新竣工排行榜
      junpai: {
        name: [],
        xAxis: null,
        rate: null,
        data: null
      },
      xingpai: {
        name: [],
        xAxis: null,
        rate: null,
        data: null
      },
      rupai: {
        name: [],
        xAxis: null,
        rate: null,
        data: null
      },
      box_data: [],

      myChart: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      myChart5: null,
      myChart6: null,
      myChart7: null,
      bot_tabTit: [],
      bot_tabTit1: [],
      bot_tabIndex: 1,
      bot_tabIndex1: 0,
      columns: columns,
      columns1: columns1,
      departmentShow: false
    };
  },
  computed: {
    monitoringItems() {
      let data = {
        itemTypeId: this.$store.state.itemTypeId,
        deptid: this.$store.state.deptid,
        departmentSwitching: this.$store.state.departmentSwitching
      };
      return data;
    }
  },
  //监控data中的数据变化
  watch: {
    monitoringItems: {
      handler(newVal, oldVal) {
        if (oldVal !== undefined) {
          this.initDataCompletion(newVal.itemTypeId, newVal.deptid);
          this.initDataInvestmentStorage(newVal.itemTypeId, newVal.deptid);
          this.departmentShow = newVal.departmentSwitching;
        }
        if (newVal.deptid) {
          this.GetBuildData(newVal.itemTypeId, newVal.deptid, newVal.curryear);
          this.GetInvestData(newVal.itemTypeId, newVal.deptid, newVal.curryear);
        }
      },
      immediate: true
    }
  },
  //方法集合
  methods: {
    bot_tabTitSwitching1(item, index) {
      this.bot_tabIndex1 = index;
      this.tableData1 = item.data;
    },
    bot_tabTitSwitching(item, index) {
      this.bot_tabIndex = index;
      this.tableData = item.data;
    },
    //开竣工表格数据
    GetBuildData(itemTypeId, deptid, curryear) {
      GetBuildData({
        itemTypeId: itemTypeId,
        deptid: deptid,
        curryear: curryear
      }).then((res) => {
        this.tableData1 = res.data.data[0].data;
        this.bot_tabTit1 = res.data.data[0].map((i, index) => {
          return { index: index + 1, name: i.name, data: i.data };
        });
      });
    },
    //投资图库表格数据
    GetInvestData(itemTypeId, deptid, curryear) {
      GetInvestData({
        itemTypeId: itemTypeId,
        deptid: deptid,
        curryear: curryear
      }).then((res) => {
        this.tableData = res.data.data[0].data;
        this.bot_tabTit = res.data.data[0].map((i, index) => {
          return { index: index + 1, name: i.name, data: i.data };
        });
      });
    },
    //开竣工情况数据
    initDataCompletion(itemTypeId, deptid) {
      GetBuildTotal({ itemTypeId: itemTypeId, deptid: deptid }).then((res) => {
        if (res.data.code == 200) {
          let data = res.data.data[0];
          this.newConstruction = data[4];
          this.newlyCompleted = data[6];
          this.setChartPie(data.slice(0, 4));
          this.workHasStarted = data[5];
          this.completed = data[7];
          let kaishuiqiu;
          if (this.newConstruction.value == 0) {
            kaishuiqiu = 0;
          } else {
            kaishuiqiu = math.numberExcept(
              this.workHasStarted.value,
              this.newConstruction.value
            );
          }
          //开工水球图
          this.setLiuChartKai(kaishuiqiu);
          //竣工水球图
          let junshuiqiu;
          if (this.newlyCompleted.value == 0) {
            junshuiqiu = 0;
          } else {
            junshuiqiu = math.numberExcept(
              this.completed.value,
              this.newlyCompleted.value
            );
          }

          this.setLiuChartJun(junshuiqiu);

          //排行榜数据
          let data1 = res.data.data[1];
          this.kaipai.name.push(data1[0].data.name);
          this.kaipai.name.push(data1[0].rate.name);
          this.kaipai.xAxis = data1[0].xAxis;
          this.kaipai.rate = data1[0].rate.data;
          this.kaipai.data = data1[0].data.data;
          this.junpai.name.push(data1[1].data.name);
          this.junpai.name.push(data1[1].rate.name);
          this.junpai.xAxis = data1[1].xAxis;
          this.junpai.rate = data1[1].rate.data;
          this.junpai.data = data1[1].data.data;
          this.setKaiChart(this.kaipai);
        } else {
          alert(res.msg);
        }
      });
    },
    //投资入库数据
    initDataInvestmentStorage(itemTypeId, deptid) {
      GetInvestTotal({ itemTypeId: itemTypeId, deptid: deptid }).then((res) => {
        if (res.data.code == 200) {
          let _data = res.data.data;
          if (_data.length > 0) {
            this.box_data = _data[1];
            let finish = _data[0].map((i) => {
              if (i.total === 0) {
                return 0;
              } else {
                return Number(i.value) / i.total;
              }
            });

            this.setLiuFinish(finish[0]);
            this.setLiuruku(finish[1]);

            //排行榜数据
            let paiData = _data[2];
            this.xingpai.name.push(paiData[0].data.name);
            this.xingpai.name.push(paiData[0].rate.name);
            this.xingpai.data = paiData[0].data.data;
            this.xingpai.rate = paiData[0].rate.data;
            this.xingpai.xAxis = paiData[0].xAxis;
            this.rupai.name.push(paiData[1].data.name);
            this.rupai.name.push(paiData[1].rate.name);
            this.rupai.data = paiData[1].data.data;
            this.rupai.rate = paiData[1].rate.data;
            this.rupai.xAxis = paiData[1].xAxis;
            this.setLineBar(this.xingpai);
          }
        } else {
          alert(res.msg);
        }
      });
    },
    startSwitching(val) {
      if (val == 1) {
        this.startShow1 = true;
        this.startShow2 = false;
        this.setKaiChart(this.kaipai);
      } else {
        this.startShow1 = false;
        this.startShow2 = true;
        this.setKaiChart(this.junpai);
      }
    },
    investmentSwitching(val) {
      if (val == 1) {
        this.inShow1 = true;
        this.inShow2 = false;
        this.setLineBar(this.xingpai);
      } else {
        this.inShow1 = false;
        this.inShow2 = true;
        this.setLineBar(this.rupai);
      }
    },
    //开竣工情况饼图
    setChartPie(sdata) {
      let sum = 0;
      sdata.every((item) => {
        if (item.value === 0) {
          sdata.map((item) => (item.value = 1.5));
          // item.value = 1;
        }
      });
      sdata.map((item) => {
        sum += item.value;
      });
      sdata.push({ name: '', value: 0 });
      sdata[sdata.length - 1].value = sum;
      let colorList = [
        '#3399fe',
        '#47ce65',
        '#ffa300',
        '#fa535d',
        '#fff',
        'rgba(0,0,0,0)'
      ];
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '18%',
          left: 'center',
          icon: 'circle',
          data: ['在建中', '已入库', '已完工', '未开工'],
          seleted: {
            'Video Ads': false
          },
          fontSize: 12
        },
        color: colorList,
        series: [
          {
            top: '20%',
            name: '',
            type: 'pie',
            radius: ['55%', '90%'],
            avoidLabelOverlap: false,
            startAngle: 180,
            minAngle: 0,
            label: {
              show: false,
              position: 'center'
            },
            data: sdata,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            silent: 'ture',
            legendHoverLink: false,
            label: {
              normal: {
                formatter: function (params) {
                  switch (params.name) {
                    case '':
                      return '';
                  }
                  switch (params.value) {
                    case 1.5:
                      return 0;
                  }
                  return params.value;
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 0
              }
            }
          }
        ]
      };
      this.myChart.setOption(option);
    },
    //新开工水球图
    setLiuChartKai(sdata) {
      let option = {
        backgroundColor: '#fff',
        series: [
          {
            type: 'liquidFill',
            name: '',
            radius: '60%',
            top: '20px',
            color: '#47ce35',
            backgroundStyle: {
              borderWidth: 1,
              color: 'rgba(70,207,101,.5)'
            },
            //调整大小
            shape: 'circle',
            //修改形状，目前支持	'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            outline: {
              borderDistance: 0,
              //内环padding值
              itemStyle: {
                borderWidth: 2,
                //圆边线宽度
                borderColor: '#b0cdb9'
              }
            },
            data: [
              {
                value: sdata,
                color: ['#46cf65']
              }
            ],
            //其中第一个数值由键值对表示
            label: {
              normal: {
                textStyle: {
                  fontSize: 14,
                  color: '#fff',
                  insideColor: '#e9ea00'
                }
              }
            }
          }
        ]
      };
      this.myChart2.setOption(option);
    },
    //新竣工水球图
    setLiuChartJun(sdata) {
      let option = {
        backgroundColor: '#fff',
        series: [
          {
            type: 'liquidFill',
            name: '',
            radius: '60%',
            top: '20px',
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#f1cd52'
                  },
                  {
                    offset: 1,
                    color: '#f1cd52'
                  }
                ],
                globalCoord: false
              }
            ], //波浪颜色
            backgroundStyle: {
              borderWidth: 1,
              color: 'rgba(241,205,82,.5)'
            },
            //调整大小
            shape: 'circle',
            //修改形状，目前支持	'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            outline: {
              borderDistance: 0,
              //内环padding值
              itemStyle: {
                borderWidth: 2,
                //圆边线宽度
                borderColor: '#f2df92'
              }
            },

            // backgroundStyle: {
            //     // 内图 背景色 边
            //     color: '#f1cd52',
            // },
            data: [
              {
                value: sdata,
                color: ['#46cf65']
              }
            ],
            //其中第一个数值由键值对表示
            label: {
              normal: {
                textStyle: {
                  fontSize: 14,
                  color: '#fff',
                  insideColor: '#e9ea00'
                }
              }
            }
          }
        ]
      };
      this.myChart3.setOption(option);
    },
    //新开工排行榜
    setKaiChart(sdata) {
      let option = {
        legend: {
          data: sdata.name
        },
        grid: {
          left: '6%',
          right: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff'
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: sdata.xAxis,
            axisLabel: {
              color: '#000',
              //  让x轴文字方向为竖向
              interval: 0,
              formatter: function (value) {
                return value.split('').join('\n');
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(240,240,240,.4)'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(240,240,240,.4)'
              }
            }
          },
          {
            type: 'value',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(240,240,240,.4)'
              }
            }
          }
        ],
        series: [
          {
            name: sdata.name[0],
            type: 'bar',
            data: sdata.data,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#EE96FF'
                  },
                  {
                    offset: 1,
                    color: '#BD94FE'
                  }
                ]),
                barBorderRadius: 10
              }
            }
          },
          {
            name: sdata.name[1],
            type: 'line',
            yAxisIndex: 1,
            symbol: 'circle',
            symbolSize: 12,
            data: sdata.rate,
            itemStyle: {
              normal: {
                color: '#FFF',
                borderColor: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#FFE3D7'
                    },
                    {
                      offset: 1,
                      color: '#FFCFE2'
                    }
                  ]
                ),
                lineStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#FFE3D7'
                    },
                    {
                      offset: 1,
                      color: '#FFCFE2'
                    }
                  ])
                }
              }
            }
          }
        ]
      };
      this.myChart4.setOption(option);
    },
    //完成形象投资水球图
    setLiuFinish(sdata) {
      let option = {
        backgroundColor: '#fff',
        title: {
          text: '完成形象投资',
          left: 'center',
          top: '88%',
          textStyle: {
            fontSize: 12,
            fontWeight: 'normal',
            color: '#a9a8ad'
          }
        },
        series: [
          {
            type: 'liquidFill',
            name: '全省',
            radius: '100%',
            top: '20px',
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#446bf5'
                  },
                  {
                    offset: 1,
                    color: '#2ca3e2'
                  }
                ],
                globalCoord: false
              }
            ], //波浪颜色
            backgroundStyle: {
              borderWidth: 1,
              color: 'rgba(54,152,251,.6)'
            },
            //调整大小
            shape: 'circle',
            //修改形状，目前支持	'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            outline: {
              borderDistance: 0,
              //内环padding值
              itemStyle: {
                borderWidth: 2,
                //圆边线宽度
                borderColor: '#b0cdb9'
              }
            },

            // backgroundStyle: {
            //     // 内图 背景色 边
            //     color: '#3698fb',
            // },
            data: [
              {
                value: sdata,
                color: ['#46cf65']
              }
            ],
            //其中第一个数值由键值对表示
            label: {
              normal: {
                textStyle: {
                  fontSize: 20,
                  color: '#fff',
                  insideColor: '#3698fb'
                }
              }
            }
          }
        ]
      };
      this.myChart5.setOption(option);
    },
    //完成入库投资水球图
    setLiuruku(sdata) {
      let option = {
        backgroundColor: '#fff',
        title: {
          text: '完成入库投资',
          left: 'center',
          top: '88%',
          textStyle: {
            fontSize: 12,
            fontWeight: 'normal',
            color: '#a9a8ad'
          }
        },
        series: [
          {
            type: 'liquidFill',
            name: '全省',
            radius: '100%',
            top: '20px',
            shape: 'circle',
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#f1cd52'
                  },
                  {
                    offset: 1,
                    color: '#f1cd52'
                  }
                ],
                globalCoord: false
              }
            ], //波浪颜色
            backgroundStyle: {
              borderWidth: 1,
              color: 'rgba(241,205,82,.5)'
            },
            //修改形状，目前支持	'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            outline: {
              borderDistance: 0,
              //内环padding值
              itemStyle: {
                borderWidth: 2,
                //圆边线宽度
                borderColor: '#f2df92'
              }
            },

            // backgroundStyle: {
            //     // 内图 背景色 边
            //     color: '#f1cd52',
            // },
            data: [
              {
                value: sdata,
                color: ['#fff']
              }
            ],
            //其中第一个数值由键值对表示
            label: {
              normal: {
                textStyle: {
                  fontSize: 20,
                  color: '#fff',
                  insideColor: '#e9ea00'
                }
              }
            }
          }
        ]
      };
      this.myChart6.setOption(option);
    },
    //投资排行榜折线、柱状图
    setLineBar(sdata) {
      let option = {
        legend: {
          data: sdata.name
        },

        xAxis: [
          {
            type: 'category',
            data: sdata.xAxis,
            axisLabel: {
              color: '#000',
              //  让x轴文字方向为竖向
              interval: 0,
              formatter: function (value) {
                return value.split('').join('\n');
              }
            }
          }
        ],
        legend: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 300000,
            interval: 50000,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '完成投资 (万元)',
            type: 'bar',
            data: sdata.data,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: '#3698fb'
              }
            }
          },
          {
            name: '投资完成率 (%)',
            type: 'line',
            yAxisIndex: 1,
            data: sdata.rate,
            itemStyle: {
              normal: {
                color: '#47ce65',
                lineStyle: {
                  color: '#47ce65'
                }
              }
            }
          }
        ]
      };
      this.myChart7.setOption(option);
    }
  },

  created() {
    this.initDataCompletion();
    this.initDataInvestmentStorage();
  },
  mounted() {
    var chartDom = document.getElementById('main1');
    var chartDom2 = document.getElementById('main2');
    var chartDom3 = document.getElementById('main3');
    var chartDom4 = document.getElementById('main4');
    var chartDom5 = document.getElementById('main5');
    var chartDom6 = document.getElementById('main6');
    var chartDom7 = document.getElementById('main7');
    this.myChart = this.$echarts.init(chartDom);
    this.myChart2 = this.$echarts.init(chartDom2);
    this.myChart3 = this.$echarts.init(chartDom3);
    this.myChart4 = this.$echarts.init(chartDom4);
    this.myChart5 = this.$echarts.init(chartDom5);
    this.myChart6 = this.$echarts.init(chartDom6);
    this.myChart7 = this.$echarts.init(chartDom7);
    let sizeFun = function () {
      this.myChart.resize();
      this.myChart2.resize();
      this.myChart3.resize();
      this.myChart4.resize();
      this.myChart5.resize();
      this.myChart6.resize();
      this.myChart7.resize();
    };
    window.addEventListener('resize', () => {
      this.myChart.resize();
      this.myChart2.resize();
      this.myChart3.resize();
      this.myChart4.resize();
      this.myChart5.resize();
      this.myChart6.resize();
      this.myChart7.resize();
    });
  } //生命周期 - 挂载完成（可以访问DOM元素）
};
var columns = [
  {
    prop: 'itemName',
    label: '项目名称'
  },
  {
    prop: 'planBuildDate',
    label: '计划开工时间'
  },
  {
    prop: 'planCompleteDate',
    label: '计划竣工时间'
  },
  {
    prop: 'buildDate',
    label: '实际开工时间'
  }
];
var columns1 = [
  {
    prop: 'itemName',
    label: '项目名称'
  },
  {
    prop: 'planRKDate',
    label: '计划入库时间'
  },
  {
    prop: 'RKDate',
    label: '实际入库时间'
  }
];
</script>

<style scoped lang="less">
@import url('@/assets/icons/iconfont.css');
@import url('@/assets/fonts/font.css');
.status {
  display: flex;
  margin-top: 20px;
  .left {
    width: 50%;
    // margin-right: 10px;
    margin-left: 10px;
    background-color: #fff;
    box-shadow: 0px 9px 17px -13px #e4e4e4;
    .line {
      width: 100%;
      height: 0.3px;
      background-color: #a9a8ad;
    }
    .left-top {
      display: flex;
      .left1 {
        width: 50%;
        position: relative;
        .title {
          font-size: 14px;
          font-weight: bold;
          margin: 10px 0 10px 20px;
          color: #000;
        }
        .title::before {
          content: '';
          position: absolute;
          width: 4px;
          height: 15px;
          background-color: #008aff;
          top: 12px;
          left: 8px;
        }
        #main1 {
          width: 100%;
          height: 300px;
        }
      }
      .right::before {
        content: '';
        width: 1px;
        height: 180px;
        background-color: #ccc;
        position: absolute;
        top: 80px;
        left: -20px;
      }
      .right {
        width: 50%;
        position: relative;
        img {
          width: 15px;
          height: 15px;
          vertical-align: middle;
        }
        .text1,
        .text2 {
          position: absolute;
          font-size: 14px;
          font-weight: bold;
          top: 20px;
          z-index: 22;
        }
        .text2 {
          top: 180px;
        }
        #main2,
        #main3 {
          width: 60%;
          height: 160px;
        }
        .bb,
        .bb2 {
          position: absolute;
          top: 60px;
          right: 30px;
          width: 157px;
          height: 65px;
          p {
            display: flex;
            margin-bottom: 20px;
            span {
              display: block;
              color: #000;
              font-weight: bold;
              margin-left: 20px;
            }
            .number {
              color: #128ddb;
              font-weight: bold;
              font-family: yousheBlack;
            }
          }
        }
        .bb2 {
          top: 220px;
        }
      }
    }
    .left-bottom {
      padding: 10px;
      .bot_tab {
        margin-left: 10px;
        display: flex;
        div {
          padding: 5px;
          border: 1px solid #ccc;
          color: #a9a8ad;
          font-size: 12px;
          cursor: pointer;
        }
        .active {
          background: #0d91ff;
          color: #fff;
        }
      }
      #main4,
      #main7 {
        width: 100%;
        height: 300px;
        margin-top: 20px;
      }
    }
  }
  .right2 {
    width: 50%;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #fff;
    box-shadow: 0px 9px 17px -13px #e4e4e4;
    .line {
      width: 100%;
      height: 0.3px;
      background-color: #ccc;
    }
    .right_top {
      display: flex;
      position: relative;
      margin-bottom: 19px;
      .title {
        font-size: 14px;
        font-weight: bold;
        margin: 10px 0 10px 20px;
        color: #000;
      }
      .main5,
      .main6 {
        width: 24%;
      }
      .main5 {
        margin-right: 50px;
        .blue {
          width: 100%;
          height: 1px;
          background-color: #3698fb;
          position: relative;
          bottom: 15%;
          z-index: 66;
        }
      }
      #main5,
      #main6 {
        width: 100%;
        height: 320px;
      }
      .yellow {
        width: 100%;
        height: 1px;
        background-color: #f1cd52;
        position: relative;
        bottom: 15%;
        z-index: 66;
      }
      .box {
        margin-left: 50px;
        margin-top: 100px;
        p {
          margin-top: 15px;
          span {
            margin-right: 10px;
          }
          .icon-wancheng1 {
            color: #21b658;
          }
          .word {
            font-weight: bold;
          }
          .number {
            color: #128ddb;
            font-family: yousheBlack;
            font-weight: bold;
          }
        }
      }
    }
    .right_bottom {
      padding: 10px;
      .bot_tab {
        margin-left: 10px;
        display: flex;
        div {
          padding: 5px;
          border: 1px solid #ccc;
          color: #a9a8ad;
          font-size: 12px;
          cursor: pointer;
        }
        .active {
          background-color: #0d91ff;
          color: #fff;
        }
      }
      #main7 {
        width: 100%;
        height: 300px;
        margin-top: 20px;
      }
    }
  }
}
</style>
